<template>
  <div>

      <mh></mh>

    <main class="" id="main-collapse">
      <div>


        上传课程

        <Form :label-width="100">

            <FormItem label="课程分类">

                <Select :datas="param" v-model="select">


                </Select>

            </FormItem>


          <FormItem label="课程标题">

              <input type="text" v-model="title">

          </FormItem>

          <FormItem label="课程内容">

              <textarea rows="10" v-autosize v-wordcount="100" v-model="desc">

              </textarea>

          </FormItem>


          <FormItem label="上传图片">

              <input type="file" @change="update" />


              <!-- 圆角例子 -->

              <Avatar :src="src" :width='100' fit="fill" >

              </Avatar>

              <img :src="src" :width="500"/>

          </FormItem>

          <FormItem label="价格">

              <input type="text" v-model="price">

              </textarea>

          </FormItem>

          <FormItem>
              <Button color="primary"  @click="submit" >提交</Button>
            </FormItem>



        </Form>



      </div>

    </main>





  </div>
</template>



<script>


import mh from './mh.vue'

export default {
  data () {
    return {
      msg: "这是一个变量",
      title:'',
      desc:'',
      param:[],
      select:'java',
      src:'',
      price:0

    }
  },
  components: {
        'mh':mh
  },
  mounted:function(){

    // 获取课程分类
    var _this = this;
    this.axios.get('http://localhost:8000/app01/catelist/').then(function(result){

        console.log(result);
        var mylist = [];
        //格式化数据
        for(let i=0;i<result.data.length;i++){
            mylist.push(result.data[i].name);
        }
        console.log(mylist);
        //赋值
        _this.param = mylist;
    });

    //使用箭头函数
    this.axios.get('http://localhost:8000/app01/catelist/').then((result) => {

      var mylist = [];
        //格式化数据
        for(let i=0;i<result.data.length;i++){
            mylist.push(result.data[i].name);
        }
        console.log(mylist);
        //赋值
        this.param = mylist;

    });

},
  methods:{

    //提交入库
    submit(){
                 //请求后台接口
                //定义一个传递变量
                var _this = this;
                this.axios.get('http://localhost:8000/app01/addcourse/',{
                    //设置参数
                    params:{
                        title:this.title,
                        desc:this.desc,
                        img:this.src,
                        category:this.select,
                        price:this.price,
                        uid:localStorage.getItem("user_id")
                    }
                }).then(function(result){

                    console.log(result);
                    _this.$Message(result.data.message);

                });


    },
    //上传图片
    update (e) {
      //声明文件对象
      let file = e.target.files[0];
      //声明参数
      let param = new FormData();
      //添加文件
      param.append('file', file, file.name);
      //声明头部
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }

      var _this = this;
     // 添加请求头
    this.axios.post('http://localhost:8000/app01/uploadfile/', param, config)
        .then(function(result) {

            console.log(result);

            //将返回的图片地址传递到节点
            _this.src = "http://localhost:8000/static/upload/"+result.data.filename;


    });

    }


  }
}


</script>

<style>



</style>
